<template>
    <section class="app" @click="clickDocument($event)">
        <div class="toggle">
            <div class="toggle-component">
                <v-toggle :change.sync="isPaintRecording" :disabled="false"></v-toggle>
            </div>
            <div class="toggle-text">
                Debug Mode (may reduce fps)
            </div>
            <div class="toggle-rightMenu">
                <div class="toggle-rightMenu-tree"
                    :class="{
                        'toggle-rightMenu-active': menu === 'tree'
                    }"
                    @click="menu = 'tree'"></div>
                <div class="toggle-rightMenu-graph"
                    :class="{
                        'toggle-rightMenu-active': menu === 'graph'
                    }"
                    @click="menu = 'graph'"></div>
            </div>
        </div>

        <section v-if="isPaintRecording" class="container">
            <!-- tree -->
            <v-menu-tree v-show="menu === 'tree'" class="container"></v-menu-tree>

            <!-- graph -->
            <v-menu-graph v-show="menu === 'graph'" class="container"></v-menu-tree>
        </section>
    </section>
</template>

<script>
import constants from 'constants';
import vToggle from './components/toggle.vue';
import vMenuTree from './components/menu-tree.vue';
import vMenuGraph from './components/menu-graph.vue';
import Bus from './bus.js';

export default {
    data () {
        return {
        };
    },
    computed: {
        isPaintRecording: {
            get () {
                return this.$state.isPaintRecording;
            },
            set (newValue) {
                this.$actions.setIsPaintRecording(newValue);
            },
        },
        menu: {
            get () {
                return this.$state.menu;
            },
            set (newValue) {
                this.$state.menu = newValue;
            },
        },
    },
    watch: {
    },
    components: {
        vToggle,
        vMenuTree,
        vMenuGraph,
    },
    methods: {
        clickDocument (event) {
            Bus.$emit('hideEdit', event);
        }
    }
};
</script>

<style lang="scss">
    @import './variables.scss';
    html, body, .main {
        height: 100%;
        overflow: hidden;
    }
    .vue-component-toggle .toggle .toggle-label .track.choose {
        background-color: $active-color !important;
    }
    * {
        user-select: none;
    }
</style>


<style lang="scss" scoped>
@import './variables.scss';

.app {
    font-family: Menlo, Consolas, monospace;    
    width: 100%;
    height: 100%;
    background-color: $background-color;
    display: flex;
    flex-direction: column;
}

.toggle {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    display: flex;
    border-bottom: 1px solid $border-color;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    background-color: $background-color;

    .toggle-text {
        color: #999;
    }

    .toggle-rightMenu {
        position: absolute;
        top: 7px;
        right: 12px;
        height: 30px;

        & > div {
            margin: 0 5px 0 0;
            width: 25px;
            height: 25px;
            display: inline-block;
            background-size: 100% 100%;
            box-shadow: 1px 1px 5px #d8d8d8;

            &:hover {
                box-shadow: 1px 1px 5px #808080;
            }
        }

        & > .toggle-rightMenu-active {
            box-shadow: inset 2px 2px 9px #d8d8d8;

            &:hover {
                box-shadow: inset 2px 2px 9px #d8d8d8;
            }
        }

        & > .toggle-rightMenu-tree {
            background-image: url('');
        }
        & > .toggle-rightMenu-graph {
            background-image: url('');
        }
    }
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}
</style>
